<template>
  <div>
    <MultiSel
      :values="values"
      :checked-value.sync="checkedValue"
    />
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {table} from '../api/http'
  import MultiSel from './MultiSel'

  export default {
  name: 'Selection2Many',
  components: { MultiSel },
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
    model: { type: String, default: '' }
  },
  data () {
    return {
      checkedValue: [],
      fields: [],
      values: [],
      fieldl: this.value,
      response: {},
      record: []
    }
  },
  computed: {
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      // isLoading: state => state.app_root.isLoading,
      app_root: state => state.app_root
    })
  },
  watch: {
    checkedValue (newVal) {
      this.fieldl.value.values = newVal
      // this.$emit('update:field', this.fieldl)
    }
  },

    mounted: function () {
    let self = this
    self.offset = 0
    self.get_more_data(self.offset, 'refresh')
  },
  methods: {

    get_more_data: function (offset, type) {
      let self = this
      // this.isLoading = true
      table(self.model, { limit: 999 }).then(function (response) {
        if (!response) {
          return
        }
        self.response = response
        self.record = self.response.record
        for (let id in self.record) {
          if (id in self.value.values) self.checkedValue.push(id)

          self.values.push({ 'id': id, 'name': self.record[id].display_name.value })
        }
      }).catch(function (error) {
        console.error('Selection2Many', error, __filename)
      })
      // this.isLoading = false
    }

  }

}
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
